<template>
  <div class="home">
    <p class="p">嘿嘿嘿{{title}}哈哈哈</p>
    <div class="box" v-text="title"></div>
    <div class="box" v-html="title"></div>
    <div class="box">嘿嘿嘿<span v-html="title"></span>哈哈哈</div>
    <p v-bind:title="pTitle">段落</p>
    <img v-bind:src="imgUrl" v-bind:width="w" v-bind:height="h">
    <img :src="imgUrl" :width="w" :height="h">
    <p>
      <span v-if="state">晴天</span>
      <span v-else>阴天</span>
      <span v-show="state">要上课</span>
    </p>
    <p>
      <span v-if="a>0">正数</span>
      <span v-else-if="a<0">负数</span>
      <span v-else>零</span>
    </p>
    <ul>
      <li v-for="(val, idx) in list">{{ idx }} {{ val }}</li>
    </ul>
  </div>
</template>

<script>
import "./test.css";
export default {
  data(){
    return {
      title: "<em>hello Vue</em>",
      pTitle: "hello 这是一个段落",
      imgUrl: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
      w: 100, h: 100,
      state: false,
      a: 0,
      list:["张三","李四","王二","赵五"]
    }
  }
}
</script>

<style scoped>
  .p{background: red}
</style>

<style>
.home .box{ color: pink }
</style>
